<!DOCTYPE html>
<html lang="en" data-theme="custom">
  <head>
    <title>Themepro</title>    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/themepro/index.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/red.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/blue.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/dark.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/vanilla-picker.csp.css" />          
    <script src="/themepro/index.umd.js"></script>
    <script src="https://unpkg.com/vanilla-picker@2"></script>
    <style> 
        .theme{
            padding:1em;
            background:white;
            border:1px solid #333; 
            cursor: pointer;
            color:gray;
        }
        button{
            position: relative; 
        }
        .current:before{
            position: absolute;
            content: " ";
            top: calc(100% - 10px);
            left: calc(50% - 8px);
            width: 16px;
            height: 24px;            
            background: transparent;
            border-color: transparent; 
            border-width: 12px 8px 12px 8px;
            border-style: solid; 
            border-bottom-color: #54c8ff;
        }
    </style> 
  </head>
  <body> 
    <div style="margin:1rem;padding:1rem;background:var(--t-theme-bgcolor);text-align:center;color: var(--auto-primary-color)"> 
        <div style="background:var(--t-theme-bgcolor-1);text-align:center"> 
            --t-theme-bgcolor-1
            <div style="margin:1rem;padding:1rem;background:var(--t-theme-bgcolor-2);text-align:center"> 
                --t-theme-bgcolor-2
                <div style="margin:1rem;padding:1rem;background:var(--t-theme-bgcolor-3);gap:1.5em;display:flex;flex-direction:column;align-items:center">                
                        <div style="display:flex;gap:0.5rem;">
                            <button class="auto-btn">取消</button>
                            <button class="auto-btn primary current">确定</button>                
                            <button class="auto-btn success">成功</button>
                            <button class="auto-btn warning">保存</button>
                            <button class="auto-btn danger">删除</button>
                            <button class="auto-btn info">关闭</button>
                        </div>
                        <div id="primary-colorpicker"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>        
    <script> 
        ThemePro.create({
            name:"custom",
            theme:"#1890ff"
        }) 
        var primaryPicker = new Picker({
            parent:  document.getElementById("primary-colorpicker"),
            popup:false,
            onChange: function(color) {
                ThemePro.createVariant("primary", {color:color.hex})
            }
        })
    </script>
  </body>
</html>

